<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%@ taglib uri="/sys-tags" prefix="sys"%>
<%@ include file="/jsp/common/common_head.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鹿图旅游语音播报平台</title>
<%@ include file="/jsp/common/common_script.jsp"%>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
<script type="text/javascript" src="${ctx}/js/common/RichMarker.js"></script>
<style>
body{margin:0;padding:0}
</style>
<script type="text/javascript">
$(function(){
/* var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.309965, 40.058333), 17);
map.enableScrollWheelZoom();
var htm = "<div style='background:#E7F0F5;color:#0082CB;border:1px solid #333;width:145px;'>"
              +     "欢迎使用百度地图！"
              +     "<img src='http://map.baidu.com/img/logo-map.gif' border='0' />"
              + "</div>";
var point = new BMap.Point(116.30816, 40.056863);
var myRM= new BMapLib.RichMarker(htm, point,{"anchor" : new BMap.Size(-72, -84),"enableDragging" : true});

map.addOverlay(myRM);

var ta = document.getElementById("ta");

function setTA(str) {
	ta.value += str;
}

function cr() {
	ta.value = "";
}

myRM.addEventListener("onmousedown", function(e) {
	setTA("MouseDown : " + e.point.lng + " , " + e.point.lat + " ; " + e.pixel.x + " , " + e.pixel.y + " | ");
});
myRM.addEventListener("onclick", function(e) {
	setTA("Click | ");
});
myRM.addEventListener("onmouseup", function(e) {
	setTA("MouseUp : " + e.point.lng + " , " + e.point.lat + " ; " + e.pixel.x + " , " + e.pixel.y + " | ");
});
myRM.addEventListener("onmouseout", function(e) {
	setTA("MouseOut : " + e.point.lng + " , " + e.point.lat + " ; " + e.pixel.x + " , " + e.pixel.y + " | ");
});
myRM.addEventListener("onmouseover", function(e) {
	setTA("MouseOver : " + e.point.lng + " , " + e.point.lat + " ; " + e.pixel.x + " , " + e.pixel.y + " | ");
});
myRM.addEventListener("ondragstart", function(e) {
	setTA("DragStart | ");
});
myRM.addEventListener("ondragging", function(e) {
	setTA("Dragging : " + e.point.lng + " , " + e.point.lat + " ; " + e.pixel.x + " , " + e.pixel.y + " | ");
});
myRM.addEventListener("ondragend", function(e) {
	setTA("DragEnd : " + e.point.lng + " , " + e.point.lat + " ; " + e.pixel.x + " , " + e.pixel.y + " | ");
});
myRM.addEventListener("onremove", function(e) {
	setTA("remove |");
});

myRM.addEventListener("ondblclick", function(e) {
	setTA("RM dblclick |");
});

myRM.addEventListener("onclick", function(e) {
	setTA("RM click |");
});
myRM.addEventListener("ontouchend", function(e) {
	setTA("touchend |");
}); */
	var map = new BMap.Map("container");
	map.centerAndZoom(new BMap.Point($("#resortLongitude").val(), $("#resortLatitude").val()), 19);
	map.enableScrollWheelZoom();
	$("input[id^='name']").each(function(i){
		var soundHtml = "<EMBED name='mp" + i + "' src='" + $("#url"+i).val() + "' hidden='true' autostart='false'>";
		/*var htm = "<div style='border:1px solid #333;width:145px;'>"
            +     $("#name"+i).val()
            +     soundHtml
            + "</div>" */;
        var htm = "<div style='background:#FFF;color:green;border:1px solid #333;width:40px;font-size:12px;' id='overDiv"+ i + "'>"
                +    $("#name"+i).val()
                +    soundHtml
                + "</div>";
		var point = new BMap.Point($("#longitude"+i).val(), $("#latitude"+i).val());
		var myRM= new BMapLib.RichMarker(htm, point,{"anchor" : new BMap.Size(-72, -84),"enableDragging" : true});
		
		map.addOverlay(myRM);
		
		myRM.addEventListener("onmouseout", function(e) {
			document.embeds('mp' + i).stop();
		});
		myRM.addEventListener("onmouseover", function(e) {
			document.embeds('mp' + i).play();
		});
	});

	
});
</script>
</head>
<body>
<s:hidden id="resortLongitude" name="resortDto.longitude"/>
<s:hidden id="resortLatitude" name="resortDto.latitude"/>
<s:iterator value="resortDto.attractionsList" id="attractionsList" status="st">					
<s:hidden id="name%{#st.index}" name="resortDto.attractionsList[%{#st.index}].name"/>						
<s:hidden id="introduce%{#st.index}" name="resortDto.attractionsList[%{#st.index}].introduce"/>						
<s:hidden id="longitude%{#st.index}" name="resortDto.attractionsList[%{#st.index}].longitude"/>
<s:hidden id="latitude%{#st.index}" name="resortDto.attractionsList[%{#st.index}].latitude"/>						
<s:hidden id="url%{#st.index}" name="resortDto.attractionsList[%{#st.index}].soundFileUrl"></s:hidden>
</s:iterator>
<div style="width:850px;height:650px;border:1px solid gray;margin:10px 0 0 10px;" id="container">
</div>
</body>
</html>


